<template>
  <div>
    <!--帮我把H1修改成导航栏-->
    <h1>System</h1>
    <div class="sidebar">
      <router-link to="/dashboard">Dashboard</router-link>
      <router-link to="/user">Users</router-link>
      <router-link to="/orders">Orders</router-link>
    </div>
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {defineComponent} from 'vue'

defineComponent({
  name: 'Home'
})
</script>

<style>
.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #f0f0f0;
  float: left;
}

.sidebar a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.main-content {
  margin-left: 200px;
  padding: 20px;
}
</style>
